import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
import { 
  Instagram, 
  ChevronRight, 
  Star, 
  Clock, 
  MapPin, 
  Menu, 
  X,
  Phone,
  Sparkles,
  Award,
  ArrowRight,
  ChevronLeft,
  ShieldCheck,
  CheckCircle2,
  Plus,
  Minus
} from 'lucide-react';

// Paleta de colores validada de Chairy Monasterios
const COLORS = {
  gold: '#ceac6f',
  nude: '#dbc5a4',
  grey: '#a6aaab',
  light: '#f7f7f7',
  dark: '#1a1a1a'
};

// Optimizador de Imágenes para Cloudflare Free
const getOptimizedImg = (url, width = 800) => `${url}&w=${width}&q=75&auto=format`;

const FAQItem = ({ question, answer }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="border-b border-gray-100 py-6">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex justify-between items-center text-left group"
      >
        <span className="text-lg font-serif group-hover:text-[#ceac6f] transition-colors">{question}</span>
        {isOpen ? <Minus size={20} color={COLORS.gold} /> : <Plus size={20} color={COLORS.gold} />}
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.div 
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden"
          >
            <p className="pt-4 text-gray-500 text-sm leading-relaxed">{answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

const BeforeAfterSlider = () => {
  const [sliderPos, setSliderPos] = useState(50);
  const containerRef = useRef(null);

  const handleInteraction = (e) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left;
    const pos = (x / rect.width) * 100;
    setSliderPos(Math.max(0, Math.min(100, pos)));
  };

  return (
    <div 
      ref={containerRef}
      className="relative w-full max-w-5xl mx-auto aspect-[4/3] md:aspect-video overflow-hidden rounded-[2.5rem] cursor-ew-resize shadow-2xl border-[10px] border-white bg-[#dbc5a4]"
      onMouseMove={handleInteraction}
      onTouchMove={handleInteraction}
    >
      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{ backgroundImage: `url(${getOptimizedImg('https://images.unsplash.com/photo-1595475241929-30119934161a?auto=format&fit=crop', 1200)})` }}
      />
      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{ 
          backgroundImage: `url(${getOptimizedImg('https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop', 1200)})`,
          clipPath: `inset(0 ${100 - sliderPos}% 0 0)`
        }}
      />
      <div className="absolute inset-y-0 w-[2px] bg-white z-20" style={{ left: `${sliderPos}%` }}>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-xl">
          <ChevronLeft size={16} color={COLORS.gold} />
          <ChevronRight size={16} color={COLORS.gold} />
        </div>
      </div>
    </div>
  );
};

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { scrollYProgress } = useScroll();
  const yHero = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll, { passive: true });
    document.title = "Chairy Monasterios | Micropigmentación de Lujo";
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const faqs = [
    { question: "¿Duele el procedimiento?", answer: "Aplicamos anestesia tópica de grado médico para que la molestia sea mínima. La mayoría de nuestras clientas califican el dolor como un 2 de 10." },
    { question: "¿Cuánto tiempo dura el resultado?", answer: "Dependiendo de tu tipo de piel y cuidados, el microblading dura entre 12 y 18 meses. Recomendamos un retoque anual." },
    { question: "¿Cuáles son los cuidados posteriores?", answer: "Evitar el sol directo, piscinas y ejercicio intenso por 7 días. Te entregaremos un kit de cuidado post-procedimiento en tu cita." }
  ];

  return (
    <div className="min-h-screen bg-[#F7F7F7] font-sans text-[#1a1a1a] selection:bg-[#ceac6f] selection:text-white antialiased">
      
      {/* Header Fixed */}
      <nav className={`fixed w-full h-24 z-[100] transition-all duration-700 flex items-center ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md' : 'bg-transparent'}`}>
        <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
          <div className="text-2xl font-serif tracking-[0.3em] uppercase">
            CHAIRY <span style={{ color: COLORS.gold }}>MONASTERIOS</span>
          </div>
          
          <div className="hidden md:flex items-center space-x-10 text-[10px] tracking-[0.4em] uppercase font-bold">
            <a href="#proceso" className="hover:text-[#ceac6f] transition-colors">Método</a>
            <a href="#servicios" className="hover:text-[#ceac6f] transition-colors">Servicios</a>
            <a href="#faq" className="hover:text-[#ceac6f] transition-colors">Dudas</a>
            <button className="px-8 py-4 bg-[#1a1a1a] text-white hover:bg-[#ceac6f] transition-all rounded-sm shadow-lg">Agendar Cita</button>
          </div>

          <button className="md:hidden p-2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={24}/> : <Menu size={24}/>}
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative h-[95vh] flex items-center overflow-hidden bg-[#dbc5a4]">
        <motion.div style={{ y: yHero }} className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-r from-[#F7F7F7] via-[#F7F7F7]/30 to-transparent z-10" />
          <img 
            src={getOptimizedImg('https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop', 1600)}
            className="w-full h-full object-cover"
            loading="eager"
            alt="Fondo de Micropigmentación"
          />
        </motion.div>
        
        <div className="relative z-20 container mx-auto px-6 md:px-12">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className="max-w-4xl"
          >
            <span className="inline-block px-4 py-1 border border-[#ceac6f] text-[#ceac6f] text-[10px] uppercase tracking-[0.6em] mb-8 font-bold">
              Artist & Beauty Expert
            </span>
            <h1 className="text-6xl md:text-[8rem] font-serif leading-[0.85] mb-10 text-[#1a1a1a]">
              Diseño que <br/>
              <span className="italic font-light" style={{ color: COLORS.gold }}>inspira</span>
            </h1>
            <p className="max-w-md text-gray-500 text-lg mb-12 font-light leading-relaxed">
              Técnicas avanzadas de micropigmentación hiperrealista para un rostro equilibrado y una mirada impactante.
            </p>
            <button className="bg-[#1a1a1a] text-white px-12 py-6 text-[11px] tracking-[0.3em] uppercase font-bold hover:bg-[#ceac6f] transition-all shadow-2xl">
              Quiero mi evaluación gratuita
            </button>
          </motion.div>
        </div>
      </section>

      {/* Galería de Micro-Momentos (SEO & Visual) */}
      <section className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              'https://images.unsplash.com/photo-1596704017254-9b121068fb31?auto=format&fit=crop',
              'https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?auto=format&fit=crop',
              'https://images.unsplash.com/photo-1522337482544-b9034d612e4d?auto=format&fit=crop',
              'https://images.unsplash.com/photo-1595475241929-30119934161a?auto=format&fit=crop'
            ].map((img, i) => (
              <div key={i} className="aspect-square bg-gray-100 overflow-hidden rounded-xl">
                <img src={getOptimizedImg(img, 600)} className="w-full h-full object-cover hover:scale-110 transition-transform duration-700" loading="lazy" alt={`Trabajo ${i+1}`} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Resultados Antes/Después */}
      <section id="resultados" className="py-24 bg-[#F7F7F7]">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-4xl md:text-5xl font-serif mb-16">Evidencia de Excelencia</h2>
          <BeforeAfterSlider />
        </div>
      </section>

      {/* FAQ Section (SEM Booster) */}
      <section id="faq" className="py-32 bg-white">
        <div className="container mx-auto px-6 max-w-4xl">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-serif mb-4">Preguntas Frecuentes</h2>
            <p className="text-gray-400 uppercase tracking-widest text-[10px]">Todo lo que necesitas saber antes de tu cita</p>
          </div>
          <div className="space-y-2">
            {faqs.map((faq, i) => (
              <FAQItem key={i} question={faq.question} answer={faq.answer} />
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-20 bg-white border-t border-gray-100">
        <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-12">
          <div className="text-2xl font-serif tracking-[0.3em] uppercase">
            CHAIRY <span style={{ color: COLORS.gold }}>MONASTERIOS</span>
          </div>
          <div className="flex space-x-8 text-[10px] tracking-[0.4em] uppercase font-bold text-gray-400">
            <a href="#" className="hover:text-[#ceac6f]">Instagram</a>
            <a href="#" className="hover:text-[#ceac6f]">WhatsApp</a>
            <a href="#" className="hover:text-[#ceac6f]">Ubicación</a>
          </div>
          <p className="text-[10px] text-gray-300 uppercase tracking-widest">
            &copy; 2026 Crafted with Precision
          </p>
        </div>
      </footer>

      {/* WhatsApp FAB */}
      <a 
        href="https://wa.me/tu_numero"
        className="fixed bottom-10 right-10 z-[150] bg-[#25D366] text-white p-5 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center group"
      >
        <Phone size={26} fill="white" />
        <span className="max-w-0 overflow-hidden group-hover:max-w-xs group-hover:ml-4 transition-all duration-500 whitespace-nowrap text-[10px] uppercase tracking-widest font-bold">
          Agendar ahora
        </span>
      </a>

    </div>
  );
};

export default App;